<template>
  <div class="live-create-room">
    <MainHeader title="创建直播间" :showSearch="false" />
    <el-card class="box-card">
      <el-steps
        :active="step"
        finish-status="success"
        space="200px"
        :align-center="true"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="直播间配置"></el-step>
      </el-steps>
      <Hyform :formItems="formItems" :itemModel="basicInfo" />
      <InforMation v-if="step == 1" @nextStepSend="nextStepSend"></InforMation>
      <el-form v-if="step == 2">
        <el-form-item class="card-title">分享卡片样式配置</el-form-item>
        <el-row class="cardFlex">
          <div style="background: #f7f7f7; padding: 20px 80px">
            <div
              style="
                padding: 0 20px;
                display: flex;
                flex-direction: column;
                background: #ffffff;
              "
            >
              <div style="font-size: 16px; padding: 10px 0">
                好友邀请你参加直播
              </div>
              <img style="width: 200px" :src="dialogImageUrl1" class="image" />
              <time style="padding: 20px; color: #999">小程序</time>
            </div>
          </div>
          <div class="cardFlex-div">
            <div class="cardFlex-top">分享卡片封面</div>
            <div>用户在微信对话框内分享的直播间将以分享卡片的形式呈现。</div>
            <div>建议尺寸：800像素 * 640像素，图片大小不得超过1M。</div>
            <!-- 引入组件。 -->
            <HyUpload @upload="upload1"></HyUpload>
          </div>
        </el-row>
        <el-form-item class="card-title">官方收录样式</el-form-item>
        <el-row class="cardFlex">
          <div
            style="
              display: flex;
              flex-direction: row;
              background: #f7f7f7;
              padding: 20px;
            "
          >
            <img style="width: 180px" :src="dialogImageUrl2" class="image" />
            <div
              style="
                height: 180px;
                width: 180px;
                font-size: 16px;
                background: #ffffff;
                padding: 20px;
              "
            >
              <div>测试测试</div>
              <div
                style="
                  margin-top: 40px;
                  color: #acacac;
                  display: flex;
                  flex-direction: row;
                "
              >
                <div
                  style="
                    text-align: center;
                    line-height: 80px;
                    margin-right: 10px;
                    width: 80px;
                    height: 80px;
                    background: #f7f7f7;
                  "
                >
                  商品展示
                </div>
                <div
                  style="
                    text-align: center;
                    line-height: 80px;
                    width: 80px;
                    height: 80px;
                    background: #f7f7f7;
                  "
                >
                  商品展示
                </div>
              </div>
            </div>
          </div>
          <div class="cardFlex-div">
            <div class="cardFlex-top">直播卡片封面</div>
            <div>图片建议大小为 800像素 * 800像素。</div>
            <div>图片大小不超过 300KB</div>
            <div>图片内容遵循平台规范后更容易被推荐。</div>
            <div>了解官方收录</div>
            <!-- 引入组件。 -->
            <HyUpload @upload="upload2"></HyUpload>
          </div>
        </el-row>
        <el-form-item class="card-title">直播间样式配置</el-form-item>
        <el-row class="cardFlex">
          <div style="width: 410px; background: #55577f">
            <img style="width: 100%" src="./img/live.png" class="image" />
            <div
              style="display: flex; width: 100%; height: 45px; font-size: 20px"
            >
              <div
                style="background: #14152d; border-radius: 25px; padding: 10px"
              >
                跟主播说点什么吧
              </div>
              <div>
                <i
                  style="
                    border-radius: 50px;
                    background: #7072f1;
                    width: 45px;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                  "
                  class="el-icon-goods"
                ></i>
              </div>
              <div>
                <i
                  style="
                    border-radius: 50px;
                    background: #7072f1;
                    width: 45px;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                  "
                  class="el-icon-share"
                ></i>
              </div>
              <div>
                <i
                  style="
                    border-radius: 50px;
                    background: #7072f1;
                    width: 45px;
                    height: 45px;
                    line-height: 45px;
                    text-align: center;
                  "
                  class="el-icon-thumb"
                ></i>
              </div>
            </div>
          </div>
          <div class="cardFlex-div">
            <div class="cardFlex-top">直播间背景墙</div>
            <div>直播间背景墙是每个直播间的默认背景。</div>
            <div>建议尺寸：800像素 * 640像素，图片大小不得超过1M。</div>
            <!-- 引入组件。 -->
            <HyUpload @upload="upload3"></HyUpload>
            <el-form-item label="直播间功能" prop="liveAbility">
              <span>以下四个功能无法在开播后设置开启或关闭</span>
              <div>
                <el-checkbox
                  v-model="liveAbility.closeComment"
                  label="评论"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  v-model="liveAbility.closeGoods"
                  label="商品货架"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  v-model="liveAbility.closeShare"
                  label="分享"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  v-model="liveAbility.closeLike"
                  label="点赞"
                  name="type"
                ></el-checkbox>
              </div>
            </el-form-item>
            <el-form-item label="拓展功能" prop="extendAbility">
              <div>
                <el-checkbox
                  v-model="extendAbility.closeReplay"
                  label="回放"
                  name="extend"
                ></el-checkbox>
                <el-checkbox
                  disabled
                  v-model="extendAbility.closeKf"
                  label="客服"
                  name="extend"
                ></el-checkbox>
              </div>
            </el-form-item>
          </div>
        </el-row>

        <div class="bottom-btn">
          <el-button @click="step = 1">上一步</el-button>
          <el-button @click="establish" type="primary">创建</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { MainHeader } from '@/components/main-header/index'
import { RoomCreate } from '@/service/main/main'
import { HyUpload } from '@/base-ui/upload/index'
import { IFormItem } from '@/base-ui/form/index'
import InforMation from './cpns/InforMation.vue'
import { infoRules } from './config/infoRules'
import router from '@/router'
export default defineComponent({
  components: { MainHeader, HyUpload, InforMation },
  async setup() {
    const formEle = ref()
    let dialogImageUrl1 =
      'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'

    let dialogImageUrl2 =
      'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'

    let dialogImageUrl3 =
      'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'

    let basicInfo = reactive({
      name: '',
      anchorName: '',
      coverImg: '',
      shareImg: '',
      feedsImg: '',
      anchorWechat: '',
      subAnchorWechat: '',
      createrWechat: '',
      time: [],
      // 直播间默认手机直播
      type: 0,
      isFeedsPublic: 1,
    })
    onMounted(() => {
      // console.log(formEle, 'formEle')
      return formEle
    })

    let step = ref(1)
    // 表单验证通过跳转下一步
    const nextStepSend = (param: any) => {
      step.value = 2
      console.log(param)
      basicInfo.name = param.name
      basicInfo.anchorName = param.anchorName
      basicInfo.anchorWechat = param.anchorWechat
      basicInfo.createrWechat = param.createrWechat
      basicInfo.isFeedsPublic = param.isFeedsPublic
      basicInfo.subAnchorWechat = param.subAnchorWechat
      basicInfo.time = param.time
    }

    // // 获取用户选择数据
    // let memberList = ref(null)
    // let getRoleListRes = GetWxRoleList()
    // memberList = await getRoleListRes

    const formItems: IFormItem[] = [
      {
        type: 'input',
        label: '直播间标题',
        placeholder: '填写本次直播的标题',
        vModel: 'name',
      },
      {
        type: 'input',
        label: '主播副微信号',
        placeholder: '主播副微信号',
        vModel: 'subAnchorWechat',
      },
      {
        type: 'datepicker',
        label: '开播时间',
        placeholder: '请输入时间范围',
        vModel: 'time',
        otherOptions: {
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          type: 'daterange',
        },
      },
      {
        type: 'input',
        label: '主播昵称',
        placeholder: '填写本次直播的昵称',
        vModel: 'anchorName',
      },
      {
        type: 'select',
        label: '直播微信号',
        placeholder: '请输入运动',
        vModel: 'anchorWechat',
        options: [
          {
            title: '篮球',
            value: 'basketball',
          },
          {
            title: '足球',
            value: 'foottball',
          },
        ],
      },
    ]

    let liveAbility = reactive({
      closeComment: true,
      closeGoods: true,
      closeShare: true,
      closeLike: true,
    })
    let extendAbility = reactive({
      closeReplay: true,
      closeKf: true,
    })

    const upload1 = (coverImg: any) => {
      // console.log(coverImg)
      // dialogImageUrl1 = coverImg.value
      basicInfo.coverImg = coverImg.value
    }
    const upload2 = (shareImg: any) => {
      // console.log(shareImg)
      // dialogImageUrl2 = shareImg.value
      basicInfo.shareImg = shareImg.value
    }
    const upload3 = (feedsImg: any) => {
      // console.log(feedsImg)
      // dialogImageUrl3 = feedsImg.value
      basicInfo.feedsImg = feedsImg.value
    }

    // 创建直播间
    const establish = async () => {
      let create = {
        name: basicInfo.name, //直播间标题
        coverImg: basicInfo.coverImg,
        startTime: basicInfo.time[0] / 1000,
        endTime: basicInfo.time[1] / 1000,
        anchorName: basicInfo.anchorName,
        anchorWechat: basicInfo.anchorWechat,
        subAnchorWechat: basicInfo.subAnchorWechat,
        createrWechat: basicInfo.createrWechat,
        shareImg: basicInfo.shareImg,
        feedsImg: basicInfo.feedsImg,
        isFeedsPublic: basicInfo.isFeedsPublic,
        type: basicInfo.type,
        closeLike: liveAbility.closeLike ? 0 : 1,
        closeGoods: liveAbility.closeGoods ? 0 : 1,
        closeComment: liveAbility.closeComment ? 0 : 1,
        closeReplay: extendAbility.closeReplay ? 0 : 1,
        closeShare: liveAbility.closeShare ? 0 : 1,
        closeKf: 1,
      }

      const result = await RoomCreate(create)
      console.log(result)
      if (result.errcode == 0) {
        router.push('./live')
      }
    }
    return {
      step,
      formEle,
      liveAbility,
      extendAbility,
      formItems,
      infoRules,
      nextStepSend,
      establish,
      upload1,
      upload2,
      upload3,
      dialogImageUrl1,
      dialogImageUrl2,
      dialogImageUrl3,
    }
  },
})
</script>

<style scoped lang="less">
.live-create-room {
  width: 100%;
  text-align: left;
  margin: 0 auto;
  .itemStyle {
    padding: 10px 20px;
  }
  .el-steps {
    justify-content: center;
    padding-bottom: 20px;
  }

  .next-step-wrap {
    display: flex;
    // justify-content: center;
  }
  .card-title {
    font-size: 0.2rem;
    text-align: center;
    font-weight: bold;
  }
  .cardFlex {
    display: flex;
    justify-content: center;
    &-div {
      width: 450px;
      font-size: 0.2rem;
      color: #737373;
      padding: 0 1rem;
      .cardFlex-top {
        color: #1a1a1a;
        font-weight: bold;
        padding-bottom: 0.2rem;
      }
    }
  }
  .bottom-btn {
    text-align: center;
  }
}
</style>
